<template>
  <div class="fontNav ">
    <div class="nav-warp container">
      <div class="head-l">
        <div class="logo"
             @click="goHome">
          <img src="~assets/img/logo.png" />
        </div>
        <div class="nav-item"
             v-for="(item, index) in navs"
             :key="item.title"
             @click="itemClick(item.path, index)">
          <div :class="{ 'item-child': true, active: activeIndex === index }">
            {{ item.title }}
          </div>
        </div>
      </div>

      <div class="head-r">

        <div v-if="getIsLogin">
          <userData :data="getUserData" />
        </div>

        <div class="loginBox"
             v-else>
          <span @click="clickloginShow">你好，请登录</span>
          <span @click="clickloginShow">免费注册</span>
        </div>
      </div>
    </div>

    <login :show="loginShow"
           @loginClose="loginClose" />
  </div>
</template>

<script>
import login from '../newLogin/NewLogin'
import userData from './userData'
import { getLoginUser } from 'server/front_k.js'

import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      navs: [
        {
          title: '首页',
          path: '/front'
        },
        {
          title: '发起众筹',
          path: '/front/sponsor'
        },
        {
          title: '众筹社区',
          path: '/front/Dynamic'
        },
        // {
        //   title: '众筹详情',
        //   path: '/front/detail'
        // }
      ],
      activeIndex: -1,
      loginShow: false
    }
  },
  methods: {
    itemClick(path, i) {
      if (this.$route.path != path) {
        this.$router.push(path)
        this.activeIndex = i
      }
    },
    goHome() {
      this.$router.push('/admin')
    },
    changeIndex(path) {
      const index = this.navs.findIndex(v => v.path === path)
      if (index !== -1) {
        this.activeIndex = index
      }else{
        this.activeIndex = null

      }
    },
    clickloginShow() {
      this.loginShow = true
    },
    loginClose() {
      this.loginShow = false
    },
    userLoginSuccess() {
      this.loginShow = false
      this._getLoginUser()
    },
    _getLoginUser(frist = false) {
      // 获取本地token
      const token = window.localStorage.getItem('front_token')
      if (!token && frist) {
        this.$show.$emit('getUserLoginSuccess')
        return
      }
      getLoginUser().then(res => {
        if (res.err_code == 1000) {
          this.$store.commit('userLogin', res.data)
          // 发送用户确实已登录的事件
          this.$show.$emit('userIsLoginSuccess', res.data['uid'])
        }
        // 发射请求完成事件事件

        this.$show.$emit('getUserLoginSuccess')
      
      })
    }
  },
  watch: {
    $route(to, from) {
      this.changeIndex(to.path)
    }
  },
  created() {
    this._getLoginUser(true)

    this.changeIndex(this.$route.path)
    // 开始监听登录成功的事件
    this.$show.$on('userLoginSuccess', this.userLoginSuccess)
    this.$show.$on('getLogin', this.userLoginSuccess)
  },
  components: {
    login,
    userData
  },
  computed: {
    ...mapGetters(['getUserData', 'getIsLogin'])
  }
}
</script>

<style scoped>
.logo img {
  height: 80px;
  cursor: pointer;
}
.fontNav {
  height: 80px;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0px 1px 5px #e6e6e6;
}
.nav-warp {
  display: flex;
  height: 100%;
}
.nav-item {
  height: 100%;
  width: 120px;

  position: relative;
}
.item-child {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 20px;
}
.item-child:hover {
  color: var(--color-main);
  border-color: var(--color-main);
  background-color: #f9f9f9;
  box-shadow: 0px 1px 5px #e6e6e6;
}
.active {
  color: var(--color-main);
  border-color: var(--color-main);
  /* box-shadow: 0px 1px 5px #e6e6e6; */
}
.head-l {
  /* width: 60%; */
  flex: 3;

  height: 100%;
  display: flex;
}
.head-r {
  height: 100%;
  flex: 2;
  display: flex;
  flex-direction: row-reverse;
}

.loginBox span {
  cursor: pointer;
  line-height: 80px;
  margin: 0 10px;
}

.loginBox span:hover {
  color: var(--color-main);
  text-decoration: underline;
}
</style>
